<template>
  <div class="home">
    <h1>{{ $t('home.welcome') }}</h1>
    <el-button type="primary" @click="changeLanguage">
      {{ $t('home.changeLanguage') }}
    </el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'HomeView',
  setup() {
    const { t, locale } = useI18n()
    console.log(t('home.welcome'))
    const changeLanguage = () => {
      locale.value = locale.value === 'en' ? 'zh' : 'en'
    }

    return {
      changeLanguage
    }
  }
})
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  text-align: center;
}
</style>